
 <template>
     <div id='index'>
        <div class='router-inner index-view'>

            <!-- wrapper begin -->
            <div class="wrapper">

                <header class="index-header">
                    <div class="index-header__company">
                        <p class="overimg">
                        <img class="logo" :src="appConfig.logoUrl">
                        <i class="light"></i>
                        <div class='text'>
                            <p class='title'>{{appConfig.appName}}</p>
                            
                        </div>
                    </div>
                    <div class="index-header__user">
                        <span class="person">
                                        <img src="../images/person.png" alt="">
                                </span>
                                <el-dropdown class='text' @command="handleCommand" trigger="click" @visible-change="visibleFn">
                                      <el-button class="el-dropdown-link title" :title="userInfo || placeholder"  size="mini">
                                        <span class="hide" >{{userInfo || placeholder}}</span>
                                        <i>
                                            <img v-if="downup1" class="left-img" src="../images/left.png" alt="">
                                            <img v-else class="right-img" src="../images/down.png" alt="">
                                        </i>
                                      </el-button>
                                  <el-dropdown-menu slot="dropdown" class='info'>
                                        <!-- <el-dropdown-item class='name'>
                                            {{userInfo || placeholder}}111
                                        </el-dropdown-item> -->
                                        <el-dropdown-item class='reset'
                                        command='reset'>
                                            修改密码
                                        </el-dropdown-item>
                                        <el-dropdown-item  class='logout'  
                                        command='logout'  @click='goLogin'>退出</el-dropdown-item>
                                  </el-dropdown-menu>
                                </el-dropdown>
                    </div>
                </header>

                <div class="index-main">
                    <div class='side-bar'>
                        <ul class='side-bar__list'>
                            <!-- <li class='side-bar__box'>
                                <div class="side-bar__item generate active">
                                    <i class='iconfont icon-xinxi-copy'></i>
                                    <p>生成风险评估报告</p>   :class='{ "no-open" : !subItem.opened }' 
                                    :class='{ active : currentRouter(subItem)}'
                                    <i class='iconfont icon-arrow'></i>
                                </div>
                            </li> -->
                            <li class='side-bar__box' v-for='item in sideBarList'>
                                <div
                                    class='menu'
                                    v-for='subItem in item'
                                    
                                    :class='{ "no-open" : !subItem.opened }'
                                    @click='goRouter(subItem)'>
                                    <div 
                                        class="menu__item"
                                        :class='{ active : currentParentRouter(subItem)}'>
                                        <!-- <i class='iconfont icon' :class='subItem.iconClass'></i> -->
                                        <span class="shu" v-show="currentParentRouter(subItem)"></span>
                                        <p>{{subItem.text}}</p>
                                        <i v-if='subItem.subRouters.length >= 1 && !subItem.opened' class='iconfont icon-arrow el-icon-arrow-right'></i>
                                        <i v-if='subItem.subRouters.length >= 1  && subItem.opened' class='iconfont icon-arrow el-icon-arrow-down'></i>
                                    </div>
                                    <ul 
                                        class='sub-menu' 
                                        v-if='subItem.subRouters.length >= 1' 
                                        :style='{ height:subItem.subRouters.length * 48 + "px" }'>
                                        <li 
                                            class='sub-menu__item' 
                                            v-for='subItem in subItem.subRouters'
                                            :class='{ active1 : currentRouter(subItem)}'
                                            @click.stop="goRouter(subItem,'sub')" ><i class="idian">.</i> {{ subItem.text }} </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="content">
                        <transition name='router' mode="out-in">
                           <keep-alive>
                               <router-view class='index-sub-router' v-if='$route.meta.keepAlive'></router-view>
                           </keep-alive>
                       </transition> 
                        <transition name='router' mode="out-in">
                            <router-view class='index-sub-router' v-if='!$route.meta.keepAlive'></router-view>
                        </transition>
                    </div>
                </div>
            </div>
            <!-- wrapper end -->


        </div>

        <modal 
            :title='title'
            :show='show_modal_reset' 
            :loading='loading_reset' 
            :cancleText='cancleText'
            :maskClose='maskClose'
            @close='show_modal_reset=false'
            @confirm='resetPwd'>
            <div class="modal-add-account__main">
                <div class="modal-form-wrap">
                    <ul class='modal-form'>
                        <li class='form-item'>
                            <span class="form-item__key">原密码</span>
                            <div class="form-item__value">
                                <input type="text" placeholder="请输入原密码" v-model='oldPwd'>
                            </div>
                        </li>
                        <li class='form-item'>
                            <span class="form-item__key">新密码</span>
                            <div class="form-item__value">
                                <input type="text" placeholder="请输入新密码" v-model='newPwd'>
                            </div>
                        </li>
                        <li class='form-item'>
                            <span class="form-item__key">确认新密码</span>
                            <div class="form-item__value">
                                <input type="text" placeholder="请再次输入新密码" v-model='reNewPwd'>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import checkBox from '../components/CheckBox.vue'
    import modal from '../components/Modal.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { loginApi,systemApi  } from '../api/api'


    export default {
        components:{
            footerBar,
            modal,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox
        },
        data() {
            return {
                isWeb:process.env.NODE_ENV == 'web',
                placeholder:'--',
                oldPwd:'',
                newPwd:'',
                reNewPwd:'',
                cancleText:'',
                title:'请先修改初始密码！',
                maskClose:false,
                isInitialPassword:false,
                show_modal_reset:false,
                loading_reset:false,
                downup1:false,
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo',
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            sideBarList(){
                console.log(this.localInfo.menuList)
                return this.localInfo.menuList
            },
            sessionId(){
                return this.localInfo.sessionId
            },
            needLogin(){
                return this.localInfo.needLogin
            },
            appConfig(){
                return this.localInfo.appConfig
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setMenuList',
                'setSessionId',
                'setAppConfig'
            ]),

             handleCommand(command){
                    if(command=='reset'){
                        this.show_modal_reset=true;
                    }else if(command=='logout'){
                        this.goLogin();
                    }
            },
            visibleFn(){
                    if(this.downup1){
                        this.downup1=false;
                    }else{
                        this.downup1=true;
                    }
              
            },
            currentParentRouter(item){
                let routerArr = this.$route.matched
                let matchRouter = _.some(routerArr,['name',item.router])

                return matchRouter
            },
            currentRouter(item){
                let query = item.query || {}
                let sameQuery = query.routerType == this.$route.query.routerType
                // console.log(query.routerType)
                // console.log(this.$route.query.routerType)
                return (item.name == this.$route.name && sameQuery)

            },
            eachSide(val,callback){
                _.each(val,(value,index)=>{
                    callback && callback(val)
                })
            },
            setOpend(){
                let routerArr = this.$route.matched
                let over = false
                _.each(this.sideBarList,(value,index)=>{
                    if(over) return false
                    _.each(value,(val,idx)=>{
                        let matchRouter = _.some(routerArr,['name',val.router])
                        if(matchRouter){
                            val.opened = true
                            over = true
                            return false
                        }
                    })
                })
            },
            goRouter(item,isSub){
                let thisRouter
                let routers = item.subRouters
                if(isSub === 'sub'){
                    /*$(".icon-arrow").css({
                        "transform":"rotate(45)"
                    })*/
                    // if(this.$route.name == item) return

                    this.$router.push(item)
                    return
                }

                if(routers.length >= 1){
                    item.opened = !item.opened
                    return
                }

                thisRouter = routers[0]
                //console.log(this.$route.name+"//"+thisRouter.name)
                if(this.$route.name == thisRouter.name) return

                this.$router.push(thisRouter)
            },
            resetPwd(){
                if(!this.oldPwd){
                    this.setMsgTip({
                        text:'请输入原密码',
                        type:'warn'
                    })
                    return
                }
                if(!this.newPwd){
                    this.setMsgTip({
                        text:'请输入新密码',
                        type:'warn'
                    })
                    return
                }
                if(this.newPwd == 88888888){
                    this.setMsgTip({
                        text:'不能设置为初始密码',
                        type:'warn'
                    })
                    return
                }
                if(!this.reNewPwd){
                    this.setMsgTip({
                        text:'请再次输入新密码',
                        type:'warn'
                    })
                    return
                }
                if(this.newPwd != this.reNewPwd){
                    this.setMsgTip({
                        text:'两次输入的新密码不一致',
                        type:'warn'
                    })
                    return
                }
                this.loading_reset = true
                loginApi.resetPwd({
                    oldPwd:this.oldPwd,
                    newPwd:this.newPwd
                })
                .then(result=>{
                    this.loading_reset = false
                    this.goLogin()
                })
                .catch(error=>{
                    console.error(error)
                    this.loading_reset = false
                })
            },
            goLogin(){
                this.showLoading()
                loginApi.loginOut()
                .then(result=>{
                    this.hideLoading()
                    this.setSessionId('')
                    let protocol = location.protocol
                    let host = location.host
                    let pathname = location.pathname
                    let search = location.search
                    let timeStamp = +new Date()

                    // if(search.indexOf("?") > -1){
                    //     search = `${search}&timeStamp=${timeStamp}`
                    // }
                    // else{
                    //     search = `${search}?timeStamp=${timeStamp}`
                    // }
                    // let realUrl = `${protocol}//${host}${pathname}${search}#login`
                    // this.showLoading()
                    // location.href = realUrl
                    
                    this.$router.push({
                        name:'login'
                    })
                })
                .catch(error=>{
                    console.error(error)
                    this.hideLoading()
                })
            },
            loginOut(){
            },
            checkInitialPassword(){
                loginApi.checkInitialPassword()
                .then(result=>{
                    this.isInitialPassword = result.isInitialPassword
                    if(result.isInitialPassword){
                        this.oldPwd = 88888888
                        this.show_modal_reset = true
                    }
                    else{
                        this.cancleText = '取消'
                        this.title = '修改密码'
                        this.maskClose = true
                    }
                })
                .catch(error=>{
                    console.error(error)
                })
            },
            
        },
        created(){
            this.setOpend()
           
            this.checkInitialPassword()
            systemApi.getAppConfig()
            .then(result=>{
                this.setAppConfig(result)
            })
            .catch(error=>{
                console.error(error)
            })
            systemApi.systemUserMenuList()
                .then(result=>{
                    console.log(result)
                    this.setMenuList(result)
                    /*this.setSessionId(result.sessionId)
                    this.setUserInfo(result.name)
                    this.loggingIn = false
                    localStorage.setItem("roles",result.roles)
                    console.log(result.menuList)
                    this.setMenuList(result.menuList)
                   /* this.$router.push({
                        name:'index'
                    })
                    this.password="";
                    this.username="";*/
                })
                .catch(error => {
                    console.error(error)
                })
            // this.setMsgTipStyle({ top:'100px' })
        },
        watch: {
            'needLogin'(newVal,oldVal){
                if(newVal == oldVal) return
                if(newVal === true)
                this.$router.replace({
                    name:'login'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .overimg{
    position: relative;
    display: block;
    /* overflow: hidden; */
    box-shadow: 0 0 10px #FFF;
}
.light{
    cursor:pointer;
    position: absolute;
    left: -180px;
    top: 0;
    width: 48px;
    height: 48px;
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
}
.overimg:hover .light{
    left:90px;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}
    .left-img{
        margin-left:12px;
        margin-bottom:4px;
        height:15px;
        width:10px;
    }
    .right-img{
        margin-left:12px;
        margin-bottom:4px;
        height:10px;
        width:15px;
    }
    body .sub-menu__item{
        padding:0;
        height:48px;
        line-height:48px;
    }
    body .menu__item .icon-arrow{
        right:44px;
    }
    .side-bar::-webkit-scrollbar {display:none}
    .shu{
        position:absolute;
        width:4px;
        height:48px;
        background:$green;
    }
    body .menu__item p{
        margin-left:25px;
    }
    body .menu__item{
        position:relative;
        width:208px;
        height:48px;
        padding:0;
    }
    body .sub-menu{
        padding-left:0;
        box-sizing:border-box;
    }
    .active1{
        //background:#ebedf1;
        color:$green;
    }
    .idian{
        float:left;
        width:16px;
        height:10px;
        line-height:10px;
        font-size:40px;
        position:relative;
        top:6px;
        margin-left:28px;
    }
    .active{
        
        background:#ebedf1;
        //border-left:4px solid $green;
    }
    .open{
        background:red;
    }
    .el-dropdown-menu{
        width:127px;
        height:100px;
        border:0;
        margin:0;
        padding:0;
    }
    .el-dropdown-menu li{
        display:block;
        line-height:20px;
    }
    .el-popper[x-placement^=bottom]{
        margin-top:20px;
    }
   
    .el-dropdown-menu__item{
        font-size:20px;
        color:$green;
        padding:0;
        text-align:center;
        margin-top:20px;
        text-align:left;
       // margin-left:23px;
        text-indent: 23px;
    }
    #index{
        background:#ebedf1;
    }
    .el-button{
        //border:0!important;
        color:$green;
        font-size:20px;
        padding:0;
        border:0;
        background:0;
    }
    .el-button:hover{
        background:0;

    }
     .el-dropdown-menu{
        top:50px!important;
    }
    .person img{
        position: absolute;
        right:204px;
        top:17px;
        width:48px;
        height:48px;
    }
    .el-dropdown{
        color:$green;
        width:127px;
    }
    .el-icon--right{
        color:#4a4a4a;
    }
    .el-button--primary{
        background:0;
        border:0;
        color:#35373b;
    }
    .index-view{
        .wrapper{
            width: 100%;
            height:100%;
            padding-bottom:10px;
            box-sizing:border-box;
        }
        .index-header{
            display:flex;
            justify-content:space-between;
            align-items:center;
            background: #fff;
            color:$green;
        }
        .index-header__company{
            display:flex;
            align-items:center;
            .logo{
                margin-left:40px;
                width: 48px;
                height:48px;
            }
            .text{
                margin:14px 18px 10px 14px;
                .title{
                    font-size: 24px;
                }
                .info{
                    display: flex;
                    padding-top: 12px;
                    align-items: center;
                    span{
                        display: block;
                        margin-right: 10px;
                    }
                    .reset{
                        cursor:pointer;
                        background-color: $green;
                        padding:3px 6px;
                        border-radius:3px;
                    }
                    .logout{
                        cursor:pointer;
                        background-color: $red;
                        padding:3px 6px;
                        border-radius:3px;
                    }
                }
            }
        }
        .index-header{
            height:88px;
        }
        .index-header__user{
            display:flex;
            align-items:center;
            padding-right: 60px;
            .iconfont{
                display: block;
                font-size: 15px;
                width: 15px;
                height:15px;
                padding:2px;
                border:1px solid #fff;
                border-radius:50%;
            }
            .name{
                padding-left:10px;
                padding-right: 20px;
                i{
                    color:#fff;
                }
            }
            .logout{
                padding-left: 20px;
                position: relative;
                color:#fff;
                cursor:pointer;
                &:before{
                    content:'';
                    position: absolute;
                    left:0;
                    top:50%;
                    height:100%;
                    transform:translate(0,-50%);
                }
            }
        }
        .index-main{
            height:100%;
            display:flex;
            position: absolute;
            top:103px;
            bottom:0;
            left:0;
            right:0;
            zoom:1;
        }
        .index-main:after{
                  display: block;
                  content: '.';
                  clear: both;
                  line-height: 0;
                  visibility: hidden;
           }
        .content{
            flex:1;
            position: relative;
            margin-left:10px;
            background:#fff;
            border-radius:4px;
            height:100%;
            overflow-y:scroll; 
        }
        .side-bar{
            width:200px;
            height:100%;
            padding:20px 0;
            overflow:auto;
            background-color: #fff;
            text-align:center;
            border-right:1px solid $sectionColor;
            box-sizing:border-box;
            border-radius:4px;
        }
        .side-bar__box{
            // border-bottom:1px solid $sectionColor;
            &:last-child{
                border-bottom:none;
            }
        }
        .index-footer{
            position: absolute;
            bottom:0;
            background-color: #FFF;
            padding: 10px;
            a{
                color:$importColor;
            }
        }
    }

</style>
